<template>
  <div>
    <div style="height: 0">
      <strong
        style="
          display: block;
          margin-top: 10px;
          text-align: center;
          font-size: 40px;
        "
        >内涝预警</strong
      >
    </div>

    <div class="empty-div"></div>
    <div>
      <el-radio-group v-model="regionLabel" class="ml-4">
        <el-radio-button label="1" size="large">深圳</el-radio-button>
        <el-radio-button label="2" size="large">肇庆</el-radio-button>
      </el-radio-group>
    </div>
    <br />

    <div v-if="!isSz">
      <div>
        <el-image :src="zq1" class="show-image2" />
        <el-image :src="zq2" class="show-image2" />
        <el-image :src="zq3" class="show-image2" />
      </div>
    </div>

    <div v-if="isSz">
      <el-row>
        <el-col :span="12">
          <el-image :src="sz1" class="show-image" />
        </el-col>
        <el-col :span="12">
          <el-image :src="sz2" class="show-image" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-image :src="sz3" class="show-image" />
        </el-col>
        <el-col :span="12">
          <el-image :src="sz4" class="show-image" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-image :src="sz5" class="show-image" />
        </el-col>
        <el-col :span="12">
          <el-image :src="sz6" class="show-image" />
        </el-col>
      </el-row>
    </div>

    <!--        <div class="box">
          <div class="chart">
            <div id="charts" ref="chart">
              &lt;!&ndash; 显示 图片 &ndash;&gt;
              &lt;!&ndash; <img :src="hoursmaxImageUrl" /> &ndash;&gt;
            </div>
          </div>
        </div>-->
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";

import sz1 from "@/assets/waterlogging/sz/SZ20230907Hydro_new.gif";
import sz2 from "@/assets/waterlogging/sz/地形图标点.png";
import sz3 from "@/assets/waterlogging/sz/Dots_0.png";
import sz4 from "@/assets/waterlogging/sz/Dots_1.png";
import sz5 from "@/assets/waterlogging/sz/Dots_2.png";
import sz6 from "@/assets/waterlogging/sz/Dots_3.png";

import zq1 from "@/assets/waterlogging/zq/ZQ_DEM1.png";
import zq3 from "@/assets/waterlogging/zq/ZQ_xijiangbeilu_shikuang.png";
import zq2 from "@/assets/waterlogging/zq/ZQ_xijiangbeilu.png";

const emit = defineEmits([
  "changeIsTimeOperator",
  "changeTimeIndex",
  "changeIsSelect2",
  "changeIsSelect3",
]);

onMounted(() => {
  emit("changeIsTimeOperator", false);
  emit("changeIsSelect3", false);
  emit("changeIsSelect2", false);
  emit("changeTimeIndex", 11);
});

const regionLabel = ref("1");

/**
 * 用来判断是否展示深圳的页面
 * @type {ComputedRef<boolean>}
 */
const isSz = computed(() => {
  return regionLabel.value === "1";
});
</script>

<style scoped lang="scss">
@media screen and (min-width: 700px) {
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chart {
    border: 3px double #c7e8ff;
    background-color: #fff;
    margin: 60px;
    width: 47%;
    height: auto;

    #charts {
      width: auto;
      height: 65vh;
    }

    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  }
}

.show-image {
  width: 80%;
  height: auto;
}

.empty-div {
  height: 8vh;
}

</style>
